<template>
	<view class="p-20" @click="opendetail">
		<view class="bg-white content">
			<view v-show="item.status==0||item.status==3" :class="item.status==3?'server-time':''" class="warp-content flex-content">
				服务时间：00天00时00分00秒
			</view>
			<view v-show="item.status==1"  class="warp-content flex-content" style="background-color:#E85631;">
				服务时间：{{timecontent}}
			</view>
			<view v-show="item.status==2" :class="item.status==2?'server-time':''" class="warp-content flex-content">
				服务时间：{{item.service_time-1}}天23时59分59秒
			</view>
			<view class="flex row-between m-t-20">
				<view class="m-l-34 flex">
					<view class="xs cart-title flex-content">
						需要车型
					</view>
					<view class="xxl bold m-l-30">
						{{item.car_name}}
					</view>
				</view>
				<view class="flex">
					<view class="" v-if="item.status==0" style="color: #848484 ;">
						挑选司机
					</view>
					<view class="" v-if="item.status==1" style="color: #848484 ;">
						进行中
					</view>
					<view class="" v-if="item.status==2" style="color: #848484 ;">
						已结束
					</view>
					<view class="" v-if="item.status==3"  style="color: #848484 ;">
						已取消
					</view>
					<view class="m-r-34">
						<u-icon name="arrow-right" color="#848484" size="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex m-t-40">
				<image class="m-l-40" style="width: 40rpx;" src="../../static/images/md-update.png" mode="widthFix"></image>
				<view class="lg m-l-16" style="color:#807F7F;">
					{{item.create_time}}
				</view>
			
			</view>
			<view class="flex m-l-40 m-t-28">
				<view class="icon-content">
					
				</view>
				<view class="lg m-l-30" style="color: #717070 ;">
					运输里程：
				</view>
				<view class="lg">
					{{item.distance}}公里
				</view>
			</view>
			<view class="flex m-l-40 m-t-28">
				<view class="icon-content">
					
				</view>
				<view class="lg m-l-30" style="color: #717070 ;">
					服务时长：
				</view>
				<view class="lg">
					{{item.service_time}}天
				</view>
			</view>
			<view class="flex row-end" style="display: flex;justify-content: flex-end;">
				<view class="" >
					￥
				</view>
				<view class="" style="font-size: 40rpx;margin-right: 40rpx;">
					{{item.status==0||item.status==3? item.money:item.quote_money}}元
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		name:"longtime-item",
		data() {
			return {
				timer:null,
				timecontent:"",
			};
		},
		mounted() {	
			let time=this.item.single_time
			if(this.item.status==1){
			this.timer=setInterval(()=>{
			   
			 
			  // console.log(time);
				this.timecontent=this.intervalTime(time)
			// console.log(this.timecontent);
			},1000)
			}
		},
		beforeDestroy() {
			clearInterval(this.timer)
			this.timer=null
		},
		methods:{
			//页面跳转
			opendetail(){
			uni.navigateTo({
				url:`/bundle/pages/longtime_detail/longtime_detail?id=${this.item.id}`
			})
			},
			//计算服务的时间
		intervalTime(endTime){
		    // var timestamp=new Date().getTime(); //计算当前时间戳
		    var timestamp = (Date.parse(new Date())) / 1000;//计算当前时间戳 (毫秒级)
		    var date1 = ""; //开始时间
		
		    date1 = timestamp; //开始时间
		
		
		    var date2 = endTime; //结束时间
			
		    // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
		    var date3 = (date1 - date2) * 1000; //时间差的毫秒数
		   
		    //计算出相差天数
		    var days = Math.floor(date3 / (24 * 3600 * 1000));
		        let daycount=days
		    if (days < 10) {
		    
		        days = `0${days}`
		    }
		    //计算出小时数
		
		    var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
		    var hours = Math.floor(leave1 / (3600 * 1000));
		    let hourscount=hours
		    if (hours < 10) {
		        hours = `0${hours}`
		    }
		    //计算相差分钟数
		    var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
		    var minutes = Math.floor(leave2 / (60 * 1000));
		    let minutescount =minutes
		    if (minutes < 10) {
		        minutes = `0${minutes}`
		    }
		    //计算相差秒数
		
		    var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
		    
		    var seconds = Math.round(leave3 / 1000);
		    let secondscount = seconds
		    if (seconds < 10) {
		        seconds = `0${seconds}`
		    }
		     return days+'天' + hours+'时'+minutes+'分'+seconds+"秒"
		
	
		
		
		    
		}
		}
	}
</script>

<style lang="scss" scoped>
	.server-time{
		background-color:#BBBBBB  !important  ;
	}
	.icon-content{
		width: 10rpx;
		border-radius: 30rpx;
		height: 10rpx;
		background-color: #717070;
	}
.content{
	width: 100%;
	height: 468rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.warp-content{
	height: 74rpx;
	color: #FFFFFF;
	width: 100%;
	background-color: #49B582;
}
.cart-title{
	color: #717070;
	width: 118rpx;
	height: 44rpx;
	background-color: #F0F0F0;
	border-radius: 10rpx;
}
</style>
